<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态组件</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="应用"></div>
</body>
<script>
    const {createApp: 创建, ref: 引用} = Vue 

    const 根组件 = {
        template: /*html*/ `
            <button @click="切换组件">切换组件</button>
            <component :is="当前组件"/>
        `,
        setup() {
            const 当前组件 = 引用('组件A')

            const 切换组件 = () => {
                当前组件.value = 当前组件.value == '组件A' ? '组件B' : '组件A'
            }

            return {当前组件, 切换组件}
        }
    }

    const 组件A = {
        template: `<div>组件A</div>`
    }

    const 组件B = {
        template: `<div>组件B</div>`
    }

    const 应用 = 创建(根组件)
    应用.component('组件A', 组件A)
    应用.component('组件B', 组件B)
    应用.mount('#应用')
</script>
</html>